<template>
  <header>
    <Logo class="index-logo"></Logo>
    <div class="welcome">Hello, I'm <span class="gradient-text">Donymh</span></div>
    <div class="description">
      <svg-icon icon-class="icon-no-job"></svg-icon> <span class="purple-text"> 前端 </span> 开发工程师
    </div>
    <div class="description">
      <svg-icon icon-class="icon-tag"></svg-icon> 不学习<span class="purple-text text-background">新技术</span>的开发者就像一台<span class="purple-text text-background">没有网络</span>的电脑
    </div>
    <div class="description intention">
      <svg-icon icon-class="icon-job-intention"></svg-icon> <span class="purple-text text-background">北京</span><span class="purple-text text-background">前端开发</span><span class="purple-text text-background">全职</span>
    </div>
    <div class="description certificate">
      <svg-icon icon-class='icon-certificate' class-name="icon"></svg-icon> <span>英语专业四级</span>
    </div>
    <div class="mh-options-wrap">
      <div class="icon-container flex-1">
        <a class="icon-container__item"
          v-for="(item, index) in list" :key="index"
          :target="item.jump ? '_blank' : ''"
          :href="item.link"
          :style="{
            width: item.isHover ? `${item.hoverWidth}px` : '40px'
          }"
          @mouseenter="hoverItem(index)"
          @mouseleave="leaveItem(index)"
          @click="handleClick(item)"
        >
          <svg-icon :icon-class='item.icon' class-name="icon"></svg-icon>
          <div class="icon-tip">
            {{item.title}}
            <span v-if="item.copy" @click.stop="copy(item.copy)">
              <svg-icon icon-class='icon-copy' class-name="icon-copy"></svg-icon>
            </span>
          </div>
        </a>
      </div>

      <div class="icon-container">
        <div class="icon-container__item" @click="handleChangeWeek(weekdayIcon)">
          <svg-icon :icon-class='weekdayIcon' class-name="icon"></svg-icon>
        </div>
      </div>
    </div>

    <div class="snake-container">
      <img :src="snakeLight" alt="">
    </div>
  </header>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import snakeLight from '@/assets/images/svg/snake-light.svg'
import {copy, downloadFileByUrl, toggleTheme} from '@/utils/index'
import Logo from './logo.vue'

type IconItemType = {
  title: string,
  icon: string,
  link: string,
  jump: boolean,
  copy?: string,
  isHover: boolean,
  hoverWidth: number,
  isPdf?: boolean
}

const list = ref<IconItemType[]>([
  {
    title: 'Github',
    icon: 'icon-github',
    link: 'https://github.com/lmh-code',
    jump: true,
    copy: '',
    isHover: false,
    hoverWidth: 90
  },
  {
    title: 'Gitee',
    icon: 'icon-gitee',
    link: 'https://gitee.com/donymh',
    jump: true,
    copy: '',
    isHover: false,
    hoverWidth: 90
  },
  {
    title: 'donymh@163.com',
    icon: 'icon-email',
    link: 'javascript:void(0)',
    jump: false,
    isHover: false,
    copy: 'donymh@163.com',
    hoverWidth: 210
  },
  {
    title: '13126972601',
    icon: 'icon-phone',
    link: 'javascript:void(0)',
    jump: false,
    isHover: false,
    copy: '13126972601',
    hoverWidth: 170
  },
  {
    title: 'lmingh6',
    icon: 'icon-wechat',
    link: 'javascript:void(0)',
    jump: false,
    isHover: false,
    copy: 'lmingh6',
    hoverWidth: 140
  },
  {
    title: '下载简历',
    icon: 'icon-download',
    link: 'javascript:void(0)',
    jump: false,
    isHover: false,
    hoverWidth: 120,
    isPdf: true
  }
])

const hoverItem = (index: number) => {
  list.value[index].isHover = true
}

const leaveItem = (index: number) => {
  list.value[index].isHover = false
}

const handleClick = (info: IconItemType) => {
  if(info.isPdf) {
    downloadFileByUrl('/13126972601.pdf', '刘明豪-8年-13126972601-高级前端开发工程师.pdf')
  }
}

const handleChangeTheme = (day: number) => {
  if(day === 6) {
    toggleTheme('Dark')
  }else {
    toggleTheme(`Light${day}`)
  }
}

const weekdayIcons = ['icon-7', 'icon-1', 'icon-2', 'icon-3', 'icon-4', 'icon-5', 'icon-6']
const weekdayIcon = ref(weekdayIcons[new Date().getDay()])
const handleChangeWeek = (path:string) => {
  let idx = weekdayIcons.findIndex(item => item === path)
  
  if(idx === 6) {
    idx = 0
  }else {
    idx++
  }

  weekdayIcon.value = weekdayIcons[idx]

  handleChangeTheme(idx)
}
</script>

<style scoped lang="scss">
@keyframes backgroundSizeAnimation {
  0% {
    background-position: 100%;
  }

  25% {
    background-position: 50%;
  }

  50% {
    background-position: 0%;
  }

  75% {
    background-position: 50%;
  }

  100% {
    background-position: 100%;
  }
}

.width-transition-enter-active,
.width-transition-leave-active {
  transition: width 0.3s ease;
}

.width-transition-enter-from,
.width-transition-leave-to {
  width: 40px;
}

.index-logo {
  display: none;
}

.welcome {
  font-size: 65px;
  font-weight: 800;
  margin: 20px 0;

  .gradient-text {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200%;
    background-position: 0%;
    font-family: "title";
    animation: backgroundSizeAnimation 10s ease-in-out infinite;
    background-image: var(--gradient);
  }
}

.description {
  font-size: 20px;
  margin-top: 8px;

  &.certificate,
  &.intention {
    display: none;
  }

  .purple-text {
    color: var(--purple_text_color);
    font-weight: 800;

    &.text-background {
      font-weight: 800;
      background: var(--text_bg_color);
      border-radius: 5px;
      font-size: 18px;
      margin: 0 3px;
      padding: 2px 4px;
    }
  }
}

.mh-options-wrap {
  display: flex;
  margin-top: 20px;
  height: 60px;

  .icon-container {
    display: flex;
    align-items: center;
    &.flex-1 {
      flex: 1;
      overflow-x: scroll;
    }
  
    &::-webkit-scrollbar {
      display: none;
    }
  
    .icon-container__item {
      width: 40px;
      height: 42px;
      box-sizing: border-box;
      border-radius: 8px;
      display: flex;
      margin-left: 10px;
      cursor: pointer;
  
      backdrop-filter: blur(var(--card_filter));
      -webkit-backdrop-filter: blur(var(--card_filter));
      background: var(--item_bg_color);
      align-items: center;
      justify-content: center;
      transition: width 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
      flex-shrink: 0;
  
      .icon {
        fill:var(--fill);
        font-size: 22px;
      }
  
      .icon-tip {
        white-space: nowrap;
        display: none;
        margin-left: 6px;
  
        .icon-copy {
          font-size: 16px;
          fill:var(--fill);
          margin-left: 6px;
        }
      }
  
      &:hover {
        transform: translateY(-2px);
        background: var(--item_hover_color);
  
        .icon-tip {
          display: block;
        }
      }
    }
  }
}

.snake-container {
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>
